import { useState, useCallback,FC } from 'react';
import { TodoItem } from '../omd.d'
import { TodoListContainer } from '../oms.style'
import ControlInput from './components/Control'
import TodoView from './components/todoview'

const TodoList:FC = () => {
  const [todos, setTodos] = useState<TodoItem[]>([]);

  // 1. 点击按钮，获取input框内容
  const handleBtnSumbit = useCallback((todo:TodoItem) => {
    setTodos(s => [...todos, todo])
  }, [])

  // 2. 切换列表展示状态
  const handleToggleEvent = useCallback((item: TodoItem) => {
    item.checked = !item.checked;
    setTodos([...todos])
  }, [])

  // 3. 删除列表数据
  const hanleRemoveItem = useCallback((item: TodoItem) => {
    setTodos(todo => todos.filter(t => t.id !== item.id))
  }, [])

  return <TodoListContainer>

    <ControlInput
     onSubmit={handleBtnSumbit}
    />

    <TodoView
     todos={todos}
     toggleClick={handleToggleEvent}
     removeClick={hanleRemoveItem}
    />

  </TodoListContainer>
}
export default TodoList;
